<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <!-- 用户信息 -->
  <div class="p-8">
    <div class="flex items-center justify-between mb-8">
      <div class="flex items-center">
        <div class="w-16 h-16 rounded-full overflow-hidden">
          <img :src="userAvatar" alt="用户头像" class="w-full h-full object-cover" />
        </div>
        <div class="ml-4">
          <div class="flex items-center">
            <h2 class="text-lg font-medium">{{ userInfo.name }}</h2>
            <el-tag type="warning" class="ml-2" size="small">VIP</el-tag>
          </div>
          <div class="flex items-center mt-2 space-x-4">
            <el-button type="primary" size="small" class="!rounded-button whitespace-nowrap">
              <el-icon class="mr-1"><Edit /></el-icon>编辑资料
            </el-button>
            <el-button type="info" plain size="small" class="!rounded-button whitespace-nowrap">
              <el-icon class="mr-1"><Share /></el-icon>分享主页
            </el-button>
          </div>
        </div>
      </div>
      <div class="flex space-x-12">
        <div class="text-center">
          <div class="text-2xl font-medium text-blue-600">{{ userInfo.follows }}</div>
          <div class="text-gray-500 text-sm mt-1">关注</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-medium text-blue-600">{{ userInfo.fans }}</div>
          <div class="text-gray-500 text-sm mt-1">粉丝</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-medium text-blue-600">{{ userInfo.posts }}</div>
          <div class="text-gray-500 text-sm mt-1">帖子</div>
        </div>
      </div>
    </div>

    <!-- 最新动态 -->
    <div class="mt-8">
      <div class="flex items-center justify-between mb-6">
        <h3 class="text-lg font-medium">最新动态</h3>
        <el-button type="primary" link class="!rounded-button whitespace-nowrap">
          查看更多<el-icon class="ml-1"><ArrowRight /></el-icon>
        </el-button>
      </div>
      <div class="space-y-4">
        <div v-for="(post, index) in recentPosts" :key="index"
             class="p-4 border border-gray-100 rounded-lg hover:shadow-sm transition-shadow">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img :src="post.avatar" alt="头像" class="w-10 h-10 rounded-full" />
              <div class="ml-3">
                <div class="text-sm font-medium">{{ post.author }}</div>
                <div class="text-xs text-gray-500">{{ post.time }}</div>
              </div>
            </div>
            <el-button type="primary" link size="small" class="!rounded-button whitespace-nowrap">
              查看详情
            </el-button>
          </div>
          <p class="mt-3 text-gray-600">{{ post.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {
  Monitor,
  User,
  Message,
  Document,
  Star,
  Compass,
  Collection,
  Share,
  Edit,
  ArrowRight
} from '@element-plus/icons-vue';

const userAvatar = 'https://ai-public.mastergo.com/ai/img_res/a6365a5bcf4e0fe93154e4b8d7b4cd0c.jpg';

const userInfo = {
  name: '谢雨轩',
  follows: 128,
  fans: 256,
  posts: 42
};

const recentPosts = [
  {
    author: '林晓梦',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/daa3ba6a05d0552ccf8a9f6796ccca71.jpg',
    time: '2024-01-15 14:30',
    content: '分享了一篇关于前端开发最佳实践的技术文章，探讨了现代化前端框架的性能优化策略。'
  },
  {
    author: '张云飞',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/7498d11170df5fe07457d43ba5028cd5.jpg',
    time: '2024-01-14 16:45',
    content: '发布了新的项目经验分享，详细讲解了大规模分布式系统的架构设计方案。'
  }
];
</script>

<style scoped>
.el-button.el-button--primary.is-link:hover {
  color: #4b5563;
}
</style>

